<template>
	<view class="figure">
		<!-- 头部 -->
		<view class="status-contents">
			<!-- 状态栏 -->
			<view class="status top-view"></view>
			<!-- 自定义导航栏 -->
			<view class="title" style="height: 35rpx;" @click="oncliNavigat"> 
				<uni-icons style="margin-left:30rpx;" type="back" color="#fff" size="30"></uni-icons>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content" style="height: 100%;">
			<!-- 头部 -->
			<view class="header">
				<view class="left">
					<image class="images" src="/static/figure/y1.png"></image>
				</view>
				<view class="right">
					<text class="wen" style="font-weight: 800; color: #fff;">胡歌</text><br>
					<text class="wen">Hugh</text><br>
					<text class="wen">1982-09-20</text><br>
					<text class="wen">中国 上海</text><br>
					<text class="wen">演员 配音 作曲 制片</text>
				</view>
			</view>
			<!-- 影人介绍 -->
			<view class="ying">
				<h4 class="biao">影人简介</h4>
				<view class="containers">
					<view class="dingdan-msg" :class="{active:flag}">
						<view class="dingdan-msg-contant">
							<text>
								胡歌，1982年9月20日出生于上海市徐汇区，中国内地男演员、歌手。
								1996年，14岁的胡歌便成为上海教育电视台的小主持人，
								2005年毕业于上海戏剧学院表演系...
								1996年，14岁的胡歌便成为上海教育电视台的小主持人。
								2005年在仙侠剧《仙剑奇侠传》中塑造了“李逍遥”一角，
								并演唱该剧插曲《六月的雨》《逍遥叹》。2006年8月遭受严重车祸，
								2007年6月复出。2009年主演仙侠剧《仙剑奇侠传三》，
								并演唱片尾曲《忘记时间》等
							</text>
						</view>
					</view>
					<view class="show-or-noshow" @click="showTag">
						{{flag?"收起":"展开"}}
					</view>　
				</view>
			</view>
			<!-- 电影作品 -->
			<view class="dian">
				<h4 class="diao">电影作品</h4>
				<view class="containers" v-for="(item,index) in yinzuo" :key="index">
					<view class="left">
						<image class="images" :src="item.image"></image>
					</view>
					<view class="right">
						<p class="wen" style="font-weight: 900;">{{item.name}}</p><br>
						<p class="wen">
							<span style="font-weight: 700; color: #f99b45;">{{item.ysha}}</span>
							{{item.yjie}}
						</p><br>
						<p class="wen">{{item.yzhi}}</p><br>
						<p class="wen">{{item.yshi}}</p><br>
					</view>
					<view class="but" style=" margin-left: 85px;margin-top: 15%;">
						<button style="background-color: #fb3777;
							font-size: x-small;
							border-radius: 50rpx;
							color: white;" type="warn" size="mini">
							购票
						</button>
					</view>
				</view>
				<view style="padding: 10px;text-align: center;color: #3c98da;">
					<text>全部{{yinzuo.length}}部电影作品</text>
				</view>
			</view>

			<!-- 影人相册 -->
			<view class="xiang">
				<h4 class="xbiao">影人相册</h4>
				<view class="jhuakuai">
					<scroll-view show-scrollbar="true" scroll-x="true" scroll-left="0" scroll-with-animation="true">
						<view class="jhuakuai1">
							<view class="jyixiaokuai" v-for="(item,index) in yin" :key="index">
								<view>
									<image :src="item.imas" mode="aspectFill" class="jimg4"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view style="padding: 10px;text-align: center;color: #3c98da;">
					<text>全部{{yin.length}}部影人照片</text>
				</view>
			</view>

			<!-- 相关影人 -->
			<view class="guan">
				<h4 class="gbiao">相关影人</h4>
				<view class="ghuakuai">
					<scroll-view show-scrollbar="true" scroll-x="true" scroll-left="0" scroll-with-animation="true">
						<view class="ghuakuai1">
							<view class="gyixiaokuai" v-for="(item,index) in ren" :key="index">
								<view>
									<image :src="item.imas" mode="aspectFill" class="gimg4"></image>
								</view>
								<span>{{item.name}}</span><br>
								<span>{{item.he}}</span>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				// 电影作品
				yinzuo: [{
						"name": "李娜",
						"yjie": "人想看",
						"ysha": "113.4万",
						"yzhi": "演员",
						"yshi": "2019-01-14",
						"image": "/static/figure/y2.png"
					},
					{
						"name": "南方车站的聚会",
						"yjie": "淘票票评分",
						"ysha": "8.2",
						"yzhi": "演员",
						"yshi": "2019-01-14",
						"image": "/static/figure/y3.png"
					},
					{
						"name": "故事里的中国",
						"yjie": "暂无评分",
						"ysha": "",
						"yzhi": "演员",
						"yshi": "2019-01-14",
						"image": "/static/figure/y4.png"
					},
					{
						"name": "攀登者",
						"yjie": "淘票票评分",
						"ysha": "9.0",
						"yzhi": "演员",
						"yshi": "2019-01-14",
						"image": "/static/figure/y3.png"
					},
					{
						"name": "龙之谷：破晓奇兵",
						"yjie": "淘票票评分",
						"ysha": "8.2",
						"yzhi": "演员",
						"yshi": "2019-01-14",
						"image": "/static/figure/y4.png"
					},
				],
				// 影人相册
				yin: [{
						"imas": "/static/figure/y5.png"
					},
					{
						"imas": "/static/figure/y6.png"
					},
				],
				// 相关影人
				ren: [{
						"imas": "/static/figure/y7.png",
						"name": "宁浩",
						"he": "合作9次"
					},
					{
						"imas": "/static/figure/y8.png",
						"name": "黄渤",
						"he": "合作7次"
					},
					{
						"imas": "/static/figure/y7.png",
						"name": "宁浩",
						"he": "合作9次"
					},
					{
						"imas": "/static/figure/y8.png",
						"name": "黄渤",
						"he": "合作7次"
					}
				]
			}
		},
		methods: {
			//路由返回事件
			oncliNavigat(){
				uni.navigateBack({
					data:1
				})
			},
			showTag() {
				this.flag = !this.flag;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.figure {
		width: 100%;

		// 自定义导航栏
		.status-contents {
			height: calc(var(--status-bar-height) + 15px);

			.top-view {
				width: 100%;
				position: fixed;
				z-index: 99;
				top: 0;
			}

			.status {
				background-color: #5e606c;
				height: var(--status-bar-height);
			}

			.title {
				width: 100%;
				position: fixed;
				z-index: 99;
				padding: 3rpx;
				background-color: #5e606c;
				padding-bottom: 30rpx;
				display: flex;
				top: var(--status-bar-height);
			}
		}

		// 内容区域样式
		.content {
			width: 100%;
			margin: 25rpx 0rpx 20rpx 0rpx;

			// 头部
			.header {
				width: 100%;
				height: 390rpx;
				display: flex;
				background-color: #5e606c;

				.left {
					.images {
						width: 250rpx;
						height: 100%;
						margin-left: 40rpx;
					}
				}

				.right {
					margin-left: 40rpx;

					.wen {
						line-height: 2.5;
						font-size: 30rpx;
						color: #cacbcf;
					}
				}
			}

			// 影人
			.ying {
				width: 100%;
				background-color: #ffffff;

				.biao {
					margin: 40rpx;
					margin-top: 15rpx;
					margin-bottom: 15rpx;
				}

				.containers {
					margin: 40rpx;

					.dingdan-msg {
						height: 165rpx;
						overflow: hidden;
						line-height: 1.5;
						border-bottom: 1px solid #E8E7E7;
					}

					//高度自适应，全部显示
					.active {
						height: auto;
						overflow: visible;
					}

					.show-or-noshow {
						text-align: center;
						height: 40rpx;
						margin-top: 20rpx;
						line-height: 40rpx;
						font-weight: bold;
						font-size: 32rpx;
					}
				}
			}

			// 电影作品
			.dian {
				width: 100%;
				margin-top: 20rpx;
				background-color: #ffffff;

				.diao {
					margin: 40rpx;
					padding-top: 25rpx;
					margin-bottom: 25rpx;
				}

				.containers {
					display: flex;
					padding: 10rpx;
					border-bottom: 1px solid #e8e8e8;

					.left {
						.images {
							width: 180rpx;
							height: 250rpx;
							margin-left: 30rpx;
						}
					}

					.right {
						margin-left: 40rpx;
						padding-top: 15rpx;
						font-size: 25rpx;
						line-height: 1.5;
					}
				}
			}

			// 影人相册
			.xiang {
				width: 100%;
				background-color: #ffffff;

				.xbiao {
					margin: 40rpx;
					padding-top: 15rpx;
					margin-bottom: 15rpx;
				}

				// 影人相册内容
				.jhuakuai {
					width: 100%;
					display: flex;
					overflow: hidden;
					white-space: nowrap;
					margin-top: 15rpx;

					.jhuakuai1 {
						display: inline-block;
						margin-left: 20rpx;

						.jyixiaokuai {
							display: inline-block;
							text-align: left;
							margin-left: 10rpx;
							margin-right: 10rpx;

							.jimg4 {
								width: 470rpx;
								height: 245rpx;
								border-radius: 10rpx;
							}
						}
					}
				}

			}

			// 相关影人
			.guan {
				width: 100%;
				background-color: #ffffff;

				.gbiao {
					margin: 40rpx;
					padding-top: 15rpx;
					margin-bottom: 15rpx;
				}

				// 相关影人内容
				.ghuakuai {
					width: 100%;
					display: flex;
					overflow: hidden;
					white-space: nowrap;
					margin-top: 15rpx;

					.ghuakuai1 {
						display: inline-block;
						margin-left: 20rpx;

						.gyixiaokuai {
							display: inline-block;
							text-align: center;
							margin-left: 10rpx;
							margin-right: 10rpx;

							.gimg4 {
								width: 190rpx;
								height: 245rpx;
								border-radius: 10rpx;
							}
						}
					}
				}

			}

		}
	}
</style>